<template>
  <div class="mynotice">
    <div class="noticeLeft">
      <van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
          <van-swipe-item>内测期间，仅对公司内部进行配送</van-swipe-item>
          <van-swipe-item>技术是开发它的人的共同灵魂。</van-swipe-item>
          <van-swipe-item>在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <div class="noticeRight">
      <img src="../images/distribution.webp" alt />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>
<style scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}

.mynotice {
  position: relative;
  padding: 6px;
}
.mynotice .van-notice-bar {
  width: 78%;
  border-radius: 40px;
  color: red;
  background-image: linear-gradient(to right, orange, pink);
}
.mynotice .noticeRight {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 40px;
  height: 40px;
}
.mynotice .noticeRight img {
  width: 100%;
}
</style>